<template>
  <div>
    <a-drawer
      title="电子发票参数"
      :visible="visible"
      :destroyOnClose="true"
      :width="550"
      :body-style="{
        height: 'calc(100% - 100px)',
        boxSizing: 'border-box',
        overflowY: 'auto',
      }"
      @close="onClose"
    >
      <a-spin :spinning="loading">
        <template v-if="list.length > 0">
          <div class="config-item" v-for="(item, index) of list" :key="index">
            <div class="config-title">
              {{ item.name }}
              <a-button
                type="link"
                class="edit-button"
                @click="item.editType = true"
                v-if="!item.editType"
                >修改</a-button
              >
            </div>
            <div
              class="config-line"
              v-for="(configs, configIndex) of item.configList"
              :key="configIndex"
            >
              <div class="config-line-label">{{ configs.txt }}:</div>
              <a-input
                v-model:value="configs.value"
                :placeholder="'请输入' + configs.txt"
                style="flex: 1"
                v-if="item.editType"
              />
              <div v-else>
                <span v-if="!configs.isEye">{{
                  maskString(configs.value) || "--"
                }}</span>
                <span v-else>{{ configs.value || "--" }}</span>
                <span
                  class="eye"
                  v-if="configs.value"
                  @click="eyeClick(configs)"
                >
                  <eye-outlined v-if="configs.isEye" />
                  <eye-invisible-outlined v-else />
                </span>
              </div>
            </div>
          </div>
        </template>
        <template v-else> <a-empty :image="simpleImage" /> </template>
      </a-spin>

      <div class="drawer-footer">
        <a-space>
          <a-button @click.prevent="onClose">取消</a-button>
          <a-button
            type="primary"
            @click.prevent="onSubmit"
            :loading="submitLoading"
            >保存</a-button
          >
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { reactive, toRefs, defineComponent, computed, watch } from "vue";
import { Empty, message } from "ant-design-vue";
import request from "@/common/utils/request";
import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "invoiceParameters",
  components: { EyeOutlined, EyeInvisibleOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      list: [],
      loading: false,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      submitLoading: false,
    });

    const onClose = () => {
      emit("cancel");
    };
    const onSubmit = () => {
      let params = {};
      state.list.forEach((item) => {
        item.configList.forEach((child) => {
          params[child.name] = child.value;
        });
      });
      state.submitLoading = true;
      request
        .post("/org", "/invoice/electron/setting", {
          config_data: params,
        })
        .then((res) => {
          state.list.forEach((item) => {
            item.editType = false;
          });
          message.success(res.message || "保存成功");
          emit("success");
          state.submitLoading = false;
        });
    };

    const getSetting = () => {
      state.loading = true;
      request
        .get("/org", "/invoice/electron/setting")
        .then((res) => {
          if (res.list && res.list.length > 0) {
            res.list.forEach((item) => {
              if (item.configList) {
                item.configList.forEach((config) => {
                  config.isEye = false;
                });
              }
            });
            state.list = res.list;
          }
          state.loading = false;
        })
        .catch(() => {
          state.loading = false;
        });
    };

    const maskString = (str) => {
      if (str) {
        return str.substr(0, 2) + str.replace(/./g, "*");
      }
    };

    const eyeClick = (data) => {
      data.isEye = !data.isEye;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getSetting();
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
      maskString,
      eyeClick,
    };
  },
});
</script>

<style lang="less" scoped>
.config-item {
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  margin-bottom: 10px;
  background: #fff;
  .config-title {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    position: relative;

    .edit-button {
      position: absolute;
      top: 7px;
      right: 10px;
    }
  }

  .config-line {
    padding: 0 20px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    height: 32px;

    .config-line-label {
      color: #666;
      margin-right: 10px;
    }
  }

  .config-line:last-child {
    margin-bottom: 20px;
  }
}
.eye {
  color: #2681f3;
  cursor: pointer;
  margin-left: 10px;
}
</style>
